<template>
  <div class="shen">
    <el-dialog
      :title="pid?'编辑':'新增'"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;">
      <p class="shenqing">基础信息</p>
      <table border="1" rules="all" class="tablestyle">
        <tr>
          <td style="width: 164px;height: 34px;text-align: center;">计划名称</td>
          <td>
            <el-input v-model="shenqingxinxi.planName" placeholder="请输入计划名称"></el-input>
          </td>
          <td style="width: 164px;height: 34px;text-align: center;">巡检类型</td>
          <td>
            <el-select v-model="shenqingxinxi.pollingType" style="width: 100%">
              <el-option
                v-for="item in pollList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 34px;text-align: center;">开始执行时间</td>
          <td style="width: 415px" class="leixing">
            <el-date-picker
                 v-model="shenqingxinxi.startDate"
                 type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 placeholder="选择日期时间">
            </el-date-picker>
          </td>
          <td style="width: 164px;height: 34px;text-align: center;">结束执行时间</td>
          <td >
            <el-date-picker
              v-model="shenqingxinxi.endDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 34px;text-align: center;">巡检周期</td>
          <td style="width: 415px" class="leixing">
             <el-input v-model="shenqingxinxi.pollingPeriod" placeholder="" style="width: 80%"></el-input>
             <el-select v-model="shenqingxinxi.pollingPeriodUnit" placeholder="" style="width:18%; ">
              <el-option
                v-for="item in xunjianzq"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </td>
          <td style="width: 164px;height: 34px;text-align: center;">有效时间</td>
          <td style="width: 415px">
           <el-input v-model="shenqingxinxi.validTime" placeholder="" style="width: 80%"></el-input>
             <el-select v-model="shenqingxinxi.validTimeUnit" placeholder="" style="width:18%; ">
              <el-option
                v-for="item in youxiaotime"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
            <td style="width: 164px;height: 34px;text-align: center;">提前提醒时间</td>
            <td style="width: 415px" class="leixing">
               <el-input v-model="shenqingxinxi.reminderTime" placeholder="" style="width: 80%"></el-input>
               <el-select v-model="shenqingxinxi.reminderTimeUnit" placeholder="" style="width:18%; ">
                  <el-option
                    v-for="item in youxiaotime"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </td>
            <td style="width: 164px;height: 34px;text-align: center;">是否启用</td>
            <td  >
             <el-select v-model="shenqingxinxi.isStartUsing" placeholder="" style="width:100%; ">
                  <el-option
                    v-for="item in shifopuArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
             </el-select>
            </td>
        </tr>
        <tr>
          <td style="width: 164px;height: 53px;text-align: center;">说明</td>
          <td  colspan="3" style="width: 415px" class="beizhu">
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 2}"
              placeholder="请输入内容"
              v-model="shenqingxinxi.explain">
            </el-input>
          </td>
        </tr>
      </table>

      <p class="shenqing">责任人</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary"  icon="el-icon-plus" size="mini" @click="choose">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
      </div>

      <el-table  :data="shenqingxinxi.devicePollingResponsibilityUsers" stripe
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
         <el-table-column  align="center"  prop="nickName" label="姓名" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  align="center"  prop="sex" label="性别" :show-overflow-tooltip="true">
          <template slot-scope="scope" >
            <span v-show="scope.row.sex=='0'">男</span>
            <span v-show="scope.row.sex=='1'">女</span>
            <span v-show="scope.row.sex=='2'">未知</span>
          </template>
        </el-table-column>
        <el-table-column  align="center"  prop="aptitudes" label="资质证书" :show-overflow-tooltip="true"></el-table-column>
      </el-table>

      <p class="shenqing">巡检路线</p>
      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary"  icon="el-icon-plus" size="mini" @click="choosexj">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtnLX">删除</el-button>
        <el-button :loading="loading"  type="primary" icon="el-icon-plus" size="mini" @click="saveBtn(1)">保存</el-button>
        <el-button :loading="loading"  type="success" icon="el-icon-plus" size="mini" @click="saveBtn(2)">提交</el-button>
      </div>

      <el-table  :data="shenqingxinxi.devicePollingPaths" stripe
                 @selection-change="handleSelectionChangeLX"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="设备编号" property="deviceCode" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="设备名称" property="deviceName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="所属单位" property="deptName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="设备类别" property="deviceTypeName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="规格型号" property="deviceModel" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="标椎" property="standardName" :show-overflow-tooltip="true"  > </el-table-column>
        <el-table-column align="center" label="存放地点" property="repositoryName" :show-overflow-tooltip="true"  > </el-table-column>
         <el-table-column
           label="操作"
           align="center"
           width="260">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-s-tools"
            @click="szdjbz(scope.$index,scope.row)">设置点检标椎</el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-top"
              @click="xunjianTop(scope.$index, scope.row)"
         >上移
         </el-button>
         <el-button
              size="mini"
              type="text"
              icon="el-icon-bottom"
              @click="xunjianBtm(scope.$index, scope.row)"
          >下移
        </el-button>
        </template>
      </el-table-column>
      </el-table>

<!--    选择负责人弹框-->
    <responsible-Dialog :routerData="transmitData" v-if="addshow" @callback="callback"></responsible-Dialog>
<!--    选择设备-->
    <addDialog v-if="selectDialog"  @callback="chooseInfo"></addDialog>
<!--    选择标准-->
    <dianjian-Dialog v-if="biaozhanShow" :transmitData="bianzhuanData"  @bianzhanBack="bianzhanBack"></dianjian-Dialog>
    </div>
    </el-dialog>
  </div>
</template>

<script>
  import responsibleDialog from "../components/responsibleDialog";
  import addDialog from './xuanzshebeiDialog'
  import dianjianDialog from './dianjianDialog'
  import request from '@/utils/request'
  export default {
    name: "Role",
    props:['pid'],
    components:{
      responsibleDialog,
      addDialog,
      dianjianDialog
    },
    data() {
      return {
        centerDialogVisible:true,
        postStyle:'post',
        xzUrl:'/device/devicePollingPlan/save',
        loading:false,
        bianzhuanData:'',
        biaozhanShow:false,
        selectDialog:false,
        //是否启用
        shifopuArr:[
          {value:'1',label:'启用'},
          {value:'0',label:'不启用'},
        ],
        //巡检周期数据
        xunjianzq:[
          {value:'1',label:'天'},
          {value:'2',label:'周'},
          {value:'3',label:'月'},
        ],
        //有效时间
        youxiaotime:[
          // {value:'1',label:'小时'},
          {value:'2',label:'天'},
          {value:'3',label:'月'},
          {value:'4',label:'年'},
        ],
        addshow:false,
        transmitData:{},//传给子集的数据
        tableDataxunz:'',
        dialogVisible:false,
        optionsleixing:[
          {value:'1',label:'设备采购'},
          {value:'2',label:'备件消耗材料采购'}
        ],//类型数据
        optionscgzq:[//采购周期
          {value:'1',label:'年'},
          {value:'2',label:'季'},
          {value:'3',label:'月'}
        ],
        //单位数据
        optionsdanwei:[
          {value:'1',label:'支'},
          {value:'2',label:'桶'},
          {value:'3',label:'箱'},
          {value:'4',label:'把'},
          {value:'5',label:'克'},
          {value:'6',label:'卷'},
        ],
        //总数居
        shenqingxinxi:{
          planName:'',
          startDate:'',
          endDate:'',
          pollingPeriod:'',
          pollingPeriodUnit:'',
          validTime:'',
          validTimeUnit:'',
          reminderTime:'',
          reminderTimeUnit:'',
          isStartUsing:'',
          explain:'',
          devicePollingPaths:[],
          devicePollingResponsibilityUsers:[],
        },
        //采购信息
        caigouxinxi: {
          inputBiaoTi:'',//标题
          ghsj:'',//供货时间
          cgjh:'',//采购计划
          gouzhiliyou:'',//购置理由
          beizhu:'',//备注
        },
        tableDatajihuaXZ:[],//选中的数据

        tableDatajihuaXZLx:[],//巡检路线选中数据,
        pollList:[]
      };
    },

    created() {
      this.getpoll()

      if(this.pid){
        this.getTaskList()
      }
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      getpoll(){
        request({
          url: '/system/dict/data/selectPolling',
          method: 'get'
        }).then(res => {
          this.pollList=res.data
        })
      },
      getTaskList() {
        request({
          url: '/device/devicePollingPlan/' + this.pid,
          method: 'get',
        }).then(response => {
          this.shenqingxinxi.id = this.pid
          this.shenqingxinxi.planName = response.data.planName
          this.shenqingxinxi.startDate = response.data.startDate
          this.shenqingxinxi.endDate = response.data.endDate
          this.shenqingxinxi.pollingPeriod = response.data.pollingPeriod
          this.shenqingxinxi.pollingPeriodUnit = response.data.pollingPeriodUnit
          this.shenqingxinxi.validTime = response.data.validTime
          this.shenqingxinxi.validTimeUnit = response.data.validTimeUnit
          this.shenqingxinxi.reminderTime = response.data.reminderTime
          this.shenqingxinxi.reminderTimeUnit = response.data.reminderTimeUnit
          this.shenqingxinxi.isStartUsing = response.data.isStartUsing
          this.shenqingxinxi.explain = response.data.explain
          this.shenqingxinxi.devicePollingPaths = response.data.devicePollingPathVos
          this.shenqingxinxi.devicePollingResponsibilityUsers = response.data.devicePollingResponsibilityUserVos
          this.shenqingxinxi.pollingType = response.data.pollingType

        });
      },
      //选择标准弹框回调
      bianzhanBack:function(data){
        if(data){
          this.shenqingxinxi.devicePollingPaths[data.num].standardName = data.standardName
          this.shenqingxinxi.devicePollingPaths[data.num].pollingStandardId = data.id
        }

        this.biaozhanShow = false
        console.log('选择标准弹框回调', this.shenqingxinxi.devicePollingPaths)

      },
      chooseInfo(msg){
        if(msg){
          this.shenqingxinxi.devicePollingPaths= this.deteleObject( this.shenqingxinxi.devicePollingPaths.concat(msg))
        }
        this.selectDialog=false
      },
      choosexj:function(){
        this.selectDialog=true
      },
      //设置点检标椎
      szdjbz:function(num,row){

        this.biaozhanShow = true
        this.bianzhuanData =row
        this.bianzhuanData.num = num
        console.log('num',num)

      },
      //弹框关闭回调函数
      callback:function(msg){
        this.addshow= false
        console.log('返回数据',msg)
        if(msg){
          this.shenqingxinxi.devicePollingResponsibilityUsers= this.deteleObject( this.shenqingxinxi.devicePollingResponsibilityUsers.concat(msg))
        }


      },
      //去重
      deteleObject:function(data){
        let hash = {};
        const data2 = data.reduce((preVal, curVal) => {
          console.log(curVal)
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal);
          return preVal
        }, [])
        return data2
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)
      },
      handleSelectionChangeLX:function(row){
        this.tableDatajihuaXZLx = row
      },
      //类型监听
      leixingchange:function(row){
        console.log('row',row)

      },
      //删除
      deleteBtn:function () {
        for (var i=0;i< this.shenqingxinxi.devicePollingResponsibilityUsers.length;i++){
          for(var j=0;j<this.tableDatajihuaXZ.length;j++){
            if(this.shenqingxinxi.devicePollingResponsibilityUsers[i].id==this.tableDatajihuaXZ[j].id){//相等
              this.shenqingxinxi.devicePollingResponsibilityUsers.splice(i,1)
            }

          }
        }
      },
       //巡检路线删除
      deleteBtnLX:function(){
        for (var i=0;i< this.shenqingxinxi.devicePollingPaths.length;i++){
          for(var j=0;j<this.tableDatajihuaXZLx.length;j++){
            if(this.shenqingxinxi.devicePollingPaths[i].deviceCode==this.tableDatajihuaXZLx[j].deviceCode){//相等
              this.shenqingxinxi.devicePollingPaths.splice(i,1)
            }

          }
        }
      },
      //添加
      choose:function () {
        this.addshow=true
        var pp={
          id:'2222222222'
        }
        this.transmitData=pp

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },

      //保存
      saveBtn:function (flag) {
        if(this.shenqingxinxi.devicePollingPaths.length>0){
          this.shenqingxinxi.devicePollingPaths.forEach((i,index)=>{
            i.number=index+1
          })
          for (var i=0;i<this.shenqingxinxi.devicePollingPaths.length;i++){
            this.shenqingxinxi.devicePollingPaths[i].deviceId =  this.shenqingxinxi.devicePollingPaths[i].id
            delete this.shenqingxinxi.devicePollingPaths[i].id
          }
        }
        if(this.shenqingxinxi.devicePollingResponsibilityUsers.length>0){
          for (var i=0;i<this.shenqingxinxi.devicePollingResponsibilityUsers.length;i++){
            this.shenqingxinxi.devicePollingResponsibilityUsers[i].sysUserId =  this.shenqingxinxi.devicePollingResponsibilityUsers[i].userId
            delete this.shenqingxinxi.devicePollingResponsibilityUsers[i].userId
          }
        }
        console.log(this.shenqingxinxi.devicePollingPaths)
        this.shenqingxinxi.submitState=flag
        if(flag==2){
          this.shenqingxinxi.verifyStatus=0
        }
        if(this.pid){
          request({
            url: '/device/devicePollingPlan/update',
            method: 'put',
            data:this.shenqingxinxi
          }).then(response => {
            this.loading = false
            this.$message({
              type: 'success',
              message: response.msg
            });
            // this.$router.push('/inspectionGL/inspectionJH')
            this.$emit('subSetChane',1)
          });
        }else{
          request({
            url: '/device/devicePollingPlan/save',
            method: 'post',
            data:this.shenqingxinxi
          }).then(response => {
            this.loading = false
            this.$message({
              type: 'success',
              message: response.msg
            });
            // this.$router.push('/inspectionGL/inspectionJH')
            this.$emit('subSetChane',1)
          });
        }
      },
      xunjianTop(index, row){
        //上移
        if (index > 0) {
            let upData = this.shenqingxinxi.devicePollingPaths[index - 1];
            this.shenqingxinxi.devicePollingPaths.splice(index - 1, 1);
            this.shenqingxinxi.devicePollingPaths.splice(index, 0, upData);
        } else {
            this.$message({
                message: '已经是第一条，上移失败',
                type: 'warning'
            });
        }
      },
      xunjianBtm(index, row){
        //下移
        if (index>=0&&index < (this.shenqingxinxi.devicePollingPaths.length-1)) {
            let downData = this.shenqingxinxi.devicePollingPaths[index + 1];
            this.shenqingxinxi.devicePollingPaths.splice(index + 1, 1);
            this.shenqingxinxi.devicePollingPaths.splice(index, 0, downData);
        } else {
          this.$message({
                message: '已经是最后一条，下移失败',
                type: 'warning'
            });

        }
      }
    }
  };
</script>
<style lang="scss">
.shen{
  .dialog .el-dialog__body{
      height: 85vh;
      overflow: scroll;
  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    // width: 900px;
    font-size: inherit;
  }
  .el-input--medium .el-input__inner {
    border: none;
  }
  .leixing .el-select{
    width: 100%;
  }
  .caigoustyle {
    width: 100%;

  }
  .beizhu .el-textarea__inner {
    border: none;
  }
  .el-table {
      margin-top: 20px;
      margin-left: 15px;
      width: 1000px;

    }
}

</style>
